<template>
  <div class="flex">
    <a-card title="基本用法">
      <a-textarea placeholder="Please enter something" allow-clear />
    </a-card>
    <a-card title="文本域状态">
      <a-textarea placeholder="Disabled status" disabled />
      <a-textarea placeholder="Error status" error />
    </a-card>
    <a-card title="字数统计">
      <a-textarea
        placeholder="Please enter something"
        :max-length="10"
        allow-clear
        show-word-limit
      />
    </a-card>
    <a-card title="自适应高度">
      <a-textarea
        default-value="This is the contents of the textarea. This is the contents of the textarea. This is the contents of the textarea."
        auto-size
      />
    </a-card>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.flex {
  height: 100vh;
  padding: 200rpx 20rpx;
  //   background: #e5e5e5;
}
:deep(.arco-card) {
  margin-bottom: 30rpx;
}

:deep(.arco-tag) {
  margin: 15rpx 10rpx;
}
</style>
